<template>
    <div class="preview-form">
      <el-dialog
       title="题目预览"
       v-model="dialogVisible"
        align-center
        width="400px"
      >
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="" prop="chkState">
          <el-radio-group v-model="formData.chkState" size="medium">
            <el-radio v-for="(item, index) in field101Options" :key="index" :label="item.value"
              :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="chkRemarks">
          <el-input v-model="formData.chkRemarks" type="textarea" placeholder="请输入审核意见"
            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item >
      </el-form>
      <template v-slot:footer>
       <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click='submitForm'>确认</el-button>
      </span>
      </template>
      </el-dialog>

    </div>
  </template>

<script>
// 引入试题审核接口
import { choiceCheck } from '@/api/hmmm/questions.js'
export default {
  name: 'questionPreview',
  props: {
    getDateList: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      // id
      id: undefined,
      // 显示与否
      dialogVisible: false,
      // 表单内容
      formData: {
        // 通过与拒绝
        chkState: 2,
        // 审核备注
        chkRemarks: undefined
      },
      rules: {
        chkState: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        chkRemarks: [{
          message: '请输入审核意见',
          trigger: 'blur'
        }]
      },
      field101Options: [{
        label: '通过',
        value: 1
      }, {
        label: '拒绝',
        value: 2
      }]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 通过表单
    submitForm () {
      this.$refs.elForm.validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        const res = await choiceCheck({
          ...this.formData, id: this.id
        })
        this.getDateList()
        this.dialogVisible = false
      })
    },
    resetForm () {
      this.$refs.elForm.resetFields()
    }
  }

}
</script>

  <style>
  .el-form--label-left .el-form-item__label {
    text-align: right;
  }
  .el-form-item--medium {
    margin-bottom: 22px;
  }
  .el-dialog__footer {
    text-align: right !important;
  }
  .el-form-item .el-form-item__content{
    margin-left: 0 !important;
  }

  </style>
